<!-- 创建时间: 2019年10月14日 星期一 23:03  立方库展示页面 进入到 详细页面 -->
<template>
    <div class="cubeinfo_container">
        <div class="cube_img">
            <!-- <img src="../../img/CubeLibrary-1.gif" /> -->
            <img src="img/CubeLibrary-1.gif" />
        </div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                库号
                <span class="mui-badge mui-badge-primary">{{ cubeLibraryNumber }}</span>
            </li>
            <li class="mui-table-view-cell">
                地址
                <span class="mui-badge mui-badge-primary">{{ cubeLibraryAddress }}</span>
            </li>
            <li class="mui-table-view-cell">
                剩余车位
                <span class="mui-badge mui-badge-primary">{{ cubeLibraryTotal }}</span>
            </li>
            <li class="mui-table-view-cell">
                价格
                <span class="mui-badge mui-badge-danger">{{ cubeLibraryUserInfo.Price }}/小时</span>
            </li>
            <li class="mui-table-view-cell">
                预约计时
                <span class="mui-badge mui-badge-danger">{{ cubeLibraryUserInfo.WaitFor }}分钟</span>
            </li>
            <li class="mui-table-view-cell">
                预约费用
                <span class="mui-badge mui-badge-danger">{{ cubeLibraryUserInfo.BookingFee }}元</span>
            </li>
            <li
                class="mui-table-view-cell text-right"
                id="Advertisement"
                v-if="cubeLibraryUserInfo.Grade == 0"
            >
                <span>开通会员 享免预约费 停车更优惠</span>
            </li>
            <li class="mui-table-view-cell">
                车位选择
                <div class="mui-row">
                    <div class="mui-col-sm-6 mui-col-xs-12">
                        <li class="mui-table-view-cell" style="padding:0">
                            <span style="color:red;font-size:20px;">*</span>
                            <mt-badge type="warning">区域</mt-badge>
                            <select name v-model="selectRegion">
                                <option value>--</option>
                                <option
                                    v-for="(item,index) in cubeLibraryRegion"
                                    :key="index"
                                    :value="cubeLibraryRegion[index]"
                                >{{ cubeLibraryRegion[index] }}</option>
                            </select>
                        </li>
                    </div>
                    <div class="mui-col-sm-6 mui-col-xs-12">
                        <li class="mui-table-view-cell" style="padding:0">
                            <span style="color:red;font-size:20px;">*</span>
                            <mt-badge type="warning">楼层</mt-badge>
                            <select v-model="showArrangement">
                                <option value>--</option>
                                <option
                                    v-for="(item,index) in selectArrangement"
                                    :key="index"
                                    :value="selectArrangement[index]"
                                >{{ selectArrangement[index] }}</option>
                            </select>
                        </li>
                    </div>
                    <div class="mui-row">
                        <div class="mui-col-sm-12 mui-col-xs-12">
                            <ul class="mui-table-view">
                                <li class="mui-table-view-cell mui-collapse">
                                    <a
                                        class="mui-navigate-right"
                                        href="#"
                                        style="padding: 6px 0px;"
                                    >
                                        <span style="color:red;font-size:20px;">*</span>
                                        <mt-badge type="warning">车位</mt-badge>
                                        <span style="margin-left:10px" v-text="selectParking"></span>
                                    </a>
                                    <div class="mui-collapse-content" style="padding:0px;">
                                        <table
                                            class="table table-bordered"
                                            v-show="cubeLibraryParking != ''"
                                        >
                                            <tbody>
                                                <tr
                                                    v-for="(item, index) in pages"
                                                    :key="index"
                                                    class="text-center"
                                                >
                                                    <td
                                                        v-for="(page,index) in item"
                                                        :key="index"
                                                        @click="tdClick(page)"
                                                    >{{ page }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="navtar">
            <ol class="breadcrumb">
                <li>库号:{{ cubeLibraryNumber }}</li>
                <li>区域:{{ selectRegion !=""? selectRegion:"--" }}</li>
                <li>楼层:{{ showArrangement !=""? showArrangement:"--" }}</li>
                <li>车位:{{ selectParking !=""? selectParking:"--" }}</li>
            </ol>
        </div>
        <div class="userInfo">
            <div class="mui-row">
                <div class="mui-col-md-3 mui-col-xs-3">
                    <label class="mui-badge mui-badge-primary mui-badge-inverted">车主:{{ userName }}</label>
                </div>
                <div class="mui-col-md-9 mui-col-xs-9">
                    <label for="car" class="mui-badge mui-badge-primary mui-badge-inverted">
                        <span style="color:red;font-size:17px;">*</span>预约车辆:
                    </label>
                    <select id="car" style="width:70px;" v-model="selectLicensePlateNumber">
                        <option
                            v-for="(item, index) in plateValues"
                            :key="index"
                            :value="item"
                        >{{ item }}</option>
                    </select>
                </div>
            </div>
        </div>
        <button
            @click="createOrder"
            tag="button"
            type="button"
            class="mui-btn mui-btn-success mui-btn-block mui-btn-outlined"
        >预约</button>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import mui from "../../lib/MUI/dist/js/mui.js";
const Base64 = require("js-base64").Base64;
import error from "../../js/error.js";
// import cubelibrary from '../../img/CubeLibrary-1.gif';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    
    data() {
        //这里存放数据
        return {
            // 头像地址
            // imgAddress: cubelibrary,
            // 立方库编号
            cubeLibraryNumber: this.$route.query.cubeLibraryNumber,
            // 立方库地址
            cubeLibraryAddress: this.$route.query.cubeLibraryAddress,
            // 立方库剩余总数
            cubeLibraryTotal: "暂无车位信息",
            // 立方库区域范围
            cubeLibraryRegion: [],
            // 选择区域
            selectRegion: "",
            // 立方库 区域key => 楼层value 范围
            cubeLibraryArrangement: "",
            // 立方库楼层
            selectArrangement: [],
            // 选择楼层
            showArrangement: "",
            // 响应主体
            responseBody: "",
            // 立方库空闲车位
            cubeLibraryParking: "",
            // 选择车位
            selectParking: "",
            // 车主信息加载 -> 车牌号、会员、价格
            cubeLibraryUserInfo: "",
            // 车主姓名
            userName: "",
            // 选择的车牌号
            selectLicensePlateNumber: ""
        };
    },
    beforeRouteEnter(to, from, next) {
        if (from.name === "CubeBookingOrder") {
            var obj = JSON.parse(sessionStorage.getItem("returncubeinfo"));
            sessionStorage.removeItem("returncubeinfo");
            next(vm => {
                setTimeout(() => {
                    vm.selectRegion = obj.selectRegion;
                    vm.showArrangement = obj.showArrangement;
                    setTimeout(() => {
                        vm.selectParking = obj.selectParking;
                    }, 100);
                    vm.selectLicensePlateNumber = obj.selectLicensePlateNumber;
                }, 200);
            });
        } else {
            next();
        }
    },
    //监听属性 类似于data概念
    computed: {
        pages() {
            var page = [];
            var arr = [];

            for (var i = 0; i < this.cubeLibraryParking.length; i++) {
                if ((i + 1) % 10 == 0) {
                    arr.push(this.cubeLibraryParking[i]);
                    page.push(arr);
                    arr = [];
                } else {
                    arr.push(this.cubeLibraryParking[i]);
                }
                if (i == this.cubeLibraryParking.length - 1) {
                    page.push(arr);
                }
            }

            return page;
        },
        plateValues(){
            var array = this.cubeLibraryUserInfo.LicensePlateNumber;
            if(array == "" || array == null){
                return;
            }
            var array = array.split(",");
            return array;
        }
    },
    //监控data中的数据变化
    watch: {
        selectRegion: function(newval) {
            if (newval != "") {
                this.selectArrangement = this.cubeLibraryArrangement[newval];
                if (this.showArrangement != "") {
                    this.showParking();
                }
            } else {
                this.selectArrangement = [];
                this.showArrangement = "";
                this.cubeLibraryParking = "";
                this.selectParking = "";
            }
        },
        showArrangement: function(newval) {
            if (newval != "") {
                this.showParking();
                this.selectParking = "";
            } else {
                this.cubeLibraryParking = "";
                this.selectParking = "";
            }
        }
    },
    //方法集合
    methods: {
        initCubeInfo() {
            this.$http
                .get("initCubeInfo", {
                    params: { cubeLibraryNumber: this.cubeLibraryNumber }
                })
                .then(
                    response => {
                        this.responseBody = response.body;
                        // 获取空闲车位数
                        var total = 0;
                        for (var i = 0; i < this.responseBody.length; i++) {
                            total += eval(this.responseBody[i][2]).length;
                        }
                        this.cubeLibraryTotal = total;

                        // 获取立方库车区
                        var region = [];
                        for (var i = 0; i < this.responseBody.length; i++) {
                            region.push(this.responseBody[i][0]);
                            for (var j = 0; j < region.length - 1; j++) {
                                if (region[j] == this.responseBody[i][0]) {
                                    region.pop();
                                    break;
                                }
                            }
                        }
                        this.cubeLibraryRegion = region;

                        // 获取库各区楼层
                        var Arrangement = "{";
                        for (var j = 0; j < region.length; j++) {
                            var arr = [];
                            for (var i = 0; i < this.responseBody.length; i++) {
                                if (this.responseBody[i][0] == region[j]) {
                                    arr.push(this.responseBody[i][1]);
                                }
                            }
                            Arrangement +=
                                '"' + region[j] + '"' + ":[" + arr + "],";
                        }
                        Arrangement = Arrangement.substring(
                            0,
                            Arrangement.length - 1
                        );
                        Arrangement += "}";
                        if (this.responseBody.length != 0) {
                            Arrangement = JSON.parse(Arrangement);
                        }
                        this.cubeLibraryArrangement = Arrangement;
                    },
                    response => {
                        error(response.status, this);
                    }
                );
        },
        initUserInfo() {
            this.$http.post("initUserInfo").then(
                response => {
                    if (response.body != null) {
                        var token = sessionStorage.getItem("cubelibrarytoken");
                        token = token.substring(
                            token.indexOf("_") + 1,
                            token.length
                        );
                        this.userName = Base64.decode(token);

                        this.cubeLibraryUserInfo = {
                            BookingFee: response.body[0].BookingFee,
                            Grade: response.body[0].Grade,
                            LicensePlateNumber:
                                response.body[0].LicensePlateNumber,
                            Price: response.body[0].Price,
                            WaitFor: response.body[0].WaitFor
                        };
                    } else {
                        Toast({
                            message: "用户信息加载失败",
                            position: "middle",
                            duration: 2000
                        });
                        this.$router.go(-1);
                    }
                },
                response => {
                    error(response.status, this);
                }
            );
        },
        showParking() {
            for (var i = 0; i < this.responseBody.length; i++) {
                if (
                    this.responseBody[i][0] == this.selectRegion &&
                    this.responseBody[i][1] == this.showArrangement
                ) {
                    this.cubeLibraryParking = eval(this.responseBody[i][2]);
                    break;
                }
            }
        },
        tdClick(page) {
            this.selectParking = page;
        },
        createOrder() {
            Date.prototype.format = function(fmt) {
                var o = {
                    "M+": this.getMonth() + 1,
                    "d+": this.getDate(),
                    "h+": this.getHours(),
                    "m+": this.getMinutes(),
                    "s+": this.getSeconds(),
                    "q+": Math.floor((this.getMonth() + 3) / 3),
                    S: this.getMilliseconds()
                };
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(
                        RegExp.$1,
                        (this.getFullYear() + "").substr(4 - RegExp.$1.length)
                    );
                }
                for (var k in o) {
                    if (new RegExp("(" + k + ")").test(fmt)) {
                        fmt = fmt.replace(
                            RegExp.$1,
                            RegExp.$1.length == 1
                                ? o[k]
                                : ("00" + o[k]).substr(("" + o[k]).length)
                        );
                    }
                }
                return fmt;
            };

            var obj = {
                userName: this.userName,
                cubeLibraryNumber: this.cubeLibraryNumber,
                cubeLibraryAddress: this.cubeLibraryAddress,
                currnetOrderTime: new Date().format("yyyy-MM-dd hh:mm:ss"),
                selectRegion: this.selectRegion,
                showArrangement: this.showArrangement,
                selectParking: this.selectParking,
                selectLicensePlateNumber: this.selectLicensePlateNumber,
                cubeLibraryUserInfo: this.cubeLibraryUserInfo
            };
            for (var val in obj) {
                if (obj[val] == "") {
                    mui.alert("请把预约信息填写完整");
                    return;
                }
            }
            this.$router.push({
                path: "/CubePage/CubeBookingOrder",
                query: obj
            });
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.initCubeInfo();
        this.initUserInfo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {}
};
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.cubeinfo_container {
    margin-top: 45px;
    .cube_img {
        text-align: center;
        box-shadow: 0 0px 3px 2px lightgrey;
        img {
            width: 200px;
            height: 200px;
        }
        img[lazy="loading"] {
            width: 120px;
            height: 120px;
            margin: auto;
        }
    }
    ul.mui-table-view {
        margin-top: 10px;
    }
    .userInfo {
        padding: 8px 15px;
        label {
            font-size: 14px;
        }
        select {
            padding: 0px;
        }
    }
    table {
        margin-top: 15px;
    }
    table td:hover {
        background-color: lightgreen;
    }
    #Advertisement {
        padding: 0px;
        color: lightslategrey;
        span {
            cursor: pointer;
            padding: 0px 12px;
        }
    }
    #Advertisement:after {
        height: 0;
    }
}

.mui-table-view-cell.mui-active {
    background-color: white;
}

.mui-btn-block {
    padding: 6px 0;
}

ol.breadcrumb {
    margin-bottom: 0px;
}
</style>